<template>
  <div class="feedback-manage-container">
    <!-- 新标题区块 -->
    <div class="feedback-title-bar">
      <div class="left">
        <span class="icon"><CustomerServiceOutlined /></span>
        <span class="title-text">用户反馈管理</span>
      </div>
      <a-button type="primary" @click="showExportModal = true">导出Excel</a-button>
    </div>
    <div class="feedback-manage-content">
      <a-card :bordered="false">
        <!-- 搜索和筛选区域 -->
        <div class="table-operations">
          <a-space>
            <a-select
              v-model:value="queryParams.type"
              style="width: 200px"
              placeholder="选择反馈类型"
              allowClear
              @change="handleTypeChange"
            >
              <a-select-option value="功能异常">功能异常</a-select-option>
              <a-select-option value="布局优化">布局优化</a-select-option>
              <a-select-option value="其他问题">其他问题</a-select-option>
            </a-select>
          </a-space>
        </div>

        <!-- 反馈列表表格 -->
        <a-table
          :dataSource="feedbackList"
          :columns="columns"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <!-- 反馈类型 -->
          <template #type="{ text }">
            <a-tag :color="getTypeColor(text)">{{ text }}</a-tag>
          </template>

          <!-- 已读状态 -->
          <template #isRead="{ text }">
            <a-badge
              :status="text === 1 ? 'default' : 'processing'"
              :text="text === 1 ? '已读' : '未读'"
            />
          </template>

          <!-- 创建时间 -->
          <template #createTime="{ text }">
            {{ formatDate(text) }}
          </template>

          <!-- 操作列 -->
          <template #action="{ record }">
            <a-button type="link" @click="showDetail(record)">查看详情</a-button>
          </template>
        </a-table>
      </a-card>
    </div>

    <!-- 反馈详情弹窗 -->
    <a-modal v-model:visible="detailVisible" title="反馈详情" :footer="null" width="600px">
      <div v-if="currentFeedback" class="feedback-detail">
        <div class="detail-item">
          <span class="label">反馈类型：</span>
          <a-tag :color="getTypeColor(currentFeedback.type)">{{ currentFeedback.type }}</a-tag>
        </div>
        <div class="detail-item">
          <span class="label">问题描述：</span>
          <div class="description">{{ currentFeedback.description }}</div>
        </div>
        <div class="detail-item">
          <span class="label">联系方式：</span>
          <span>{{ currentFeedback.contact || '未提供' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">提交时间：</span>
          <span>{{ formatDate(currentFeedback.createTime) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">状态：</span>
          <a-badge
            :status="currentFeedback.isRead === 1 ? 'default' : 'processing'"
            :text="currentFeedback.isRead === 1 ? '已读' : '未读'"
          />
        </div>
        <div class="detail-actions">
          <a-button
            type="primary"
            :disabled="currentFeedback.isRead === 1"
            @click="markAsRead(currentFeedback.id)"
          >
            标记为已读
          </a-button>
          <a-button @click="detailVisible = false">关闭</a-button>
        </div>
      </div>
    </a-modal>
    <!-- 导出Excel弹窗 -->
    <a-modal v-model:visible="showExportModal" title="导出用户反馈Excel" :footer="null" centered>
      <a-form layout="vertical">
        <a-form-item label="问题类型">
          <a-select v-model:value="exportParams.type" allowClear placeholder="请选择问题类型">
            <a-select-option value="功能异常">功能异常</a-select-option>
            <a-select-option value="布局优化">布局优化</a-select-option>
            <a-select-option value="其他问题">其他问题</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="联系方式">
          <a-input v-model:value="exportParams.contact" placeholder="请输入联系方式" allowClear />
        </a-form-item>
        <a-form-item label="日期">
          <a-date-picker
            v-model:value="exportParams.date"
            style="width: 100%"
            placeholder="请选择日期"
            :locale="datePickerLocale"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" block @click="handleExportExcel">确认导出</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { message } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import { CustomerServiceOutlined } from '@ant-design/icons-vue'
  import {
    exportFeedbackExcel,
    getFeedbackList,
    markFeedbackAsRead,
  } from '@/api/guanliyuanmokuaijiekou'
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'

  // 查询参数
  const queryParams = reactive({
    page: 1,
    pageSize: 10,
    type: undefined,
  })

  // 加载状态
  const loading = ref(false)

  // 反馈列表数据类型定义
  interface FeedbackItem {
    id: string
    contact: string
    description: string
    type: string
    createTime: number
    isRead: number
  }

  // 反馈列表数据
  const feedbackList = ref<FeedbackItem[]>([])

  // 详情弹窗相关
  const detailVisible = ref(false)
  const currentFeedback = ref<FeedbackItem | null>(null)

  // 分页配置
  const pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 10,
    showSizeChanger: true,
    showTotal: (total: number) => `共 ${total} 条`,
  })

  // 表格列定义
  const columns = [
    {
      title: '反馈类型',
      dataIndex: 'type',
      key: 'type',
      slots: { customRender: 'type' },
    },
    {
      title: '问题描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
    {
      title: '联系方式',
      dataIndex: 'contact',
      key: 'contact',
    },
    {
      title: '状态',
      dataIndex: 'isRead',
      key: 'isRead',
      slots: { customRender: 'isRead' },
    },
    {
      title: '提交时间',
      dataIndex: 'createTime',
      key: 'createTime',
      slots: { customRender: 'createTime' },
    },
    {
      title: '操作',
      key: 'action',
      slots: { customRender: 'action' },
    },
  ]

  // 获取反馈列表数据
  const getFeedbackListData = async () => {
    loading.value = true
    try {
      const params: any = {
        page: queryParams.page,
        pageSize: queryParams.pageSize,
      }
      if (queryParams.type) params.type = queryParams.type
      const res = await getFeedbackList(params)
      if (res.data.code === 200) {
        feedbackList.value = res.data.data.records.map((record: any) => ({
          ...record,
          id: String(record.id),
        }))
        pagination.total = res.data.data.total
      } else {
        message.error(res.data.message || '获取反馈列表失败')
      }
    } catch {
      message.error('获取反馈列表失败')
    } finally {
      loading.value = false
    }
  }

  // 显示详情
  const showDetail = (record: FeedbackItem) => {
    currentFeedback.value = {
      ...record,
      id: String(record.id),
    }
    detailVisible.value = true
  }

  // 标记为已读
  const markAsRead = async (id: string) => {
    try {
      const res = await markFeedbackAsRead(id)
      if (res.data.code === 200) {
        message.success('已标记为已读')
        // 更新当前反馈的状态
        if (currentFeedback.value) {
          currentFeedback.value.isRead = 1
        }
        // 关闭弹窗
        detailVisible.value = false
        // 刷新列表
        getFeedbackListData()
      } else {
        message.error(res.data.message || '操作失败')
      }
    } catch {
      message.error('操作失败')
    }
  }

  // 处理表格变化
  const handleTableChange = (pag: any) => {
    queryParams.page = pag.current
    queryParams.pageSize = pag.pageSize
    pagination.current = pag.current
    pagination.pageSize = pag.pageSize
    getFeedbackListData()
  }

  // 处理类型筛选变化
  const handleTypeChange = () => {
    queryParams.page = 1
    pagination.current = 1
    getFeedbackListData()
  }

  // 获取类型对应的颜色
  const getTypeColor = (type: string) => {
    const colorMap: Record<string, string> = {
      功能异常: 'error',
      布局优化: 'warning',
      其他问题: 'default',
    }
    return colorMap[type] || 'default'
  }

  // 格式化日期
  const formatDate = (date: string) => {
    return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
  }

  // 导出相关
  const showExportModal = ref(false)
  const exportParams = reactive({
    type: undefined as string | undefined,
    contact: '',
    date: null as any,
  })
  const datePickerLocale = locale
  const handleExportExcel = async () => {
    const params = {
      type: exportParams.type,
      contact: exportParams.contact,
      date: exportParams.date ? dayjs(exportParams.date).format('YYYY-MM-DD') : undefined,
    }
    try {
      const res = await exportFeedbackExcel(params)
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = '用户反馈导出.xlsx'
      link.click()
      window.URL.revokeObjectURL(url)
      showExportModal.value = false
    } catch {
      message.error('导出失败')
    }
  }

  // 页面加载时获取数据
  onMounted(() => {
    getFeedbackListData()
  })
</script>

<style scoped>
  .feedback-manage-container {
    padding: 24px;
    background: var(--theme-background);
    min-height: 100vh;
    transition: all 0.3s ease;
  }

  .feedback-manage-content {
    background: var(--theme-surface);
    padding: 24px;
    border-radius: 2px;
    transition: all 0.3s ease;
    border: 1px solid var(--theme-border);
    box-shadow: 0 2px 8px var(--theme-shadow);
  }

  .table-operations {
    margin-bottom: 16px;
  }

  :deep(.ant-card-head) {
    border-bottom: 1px solid var(--theme-border);
    margin-bottom: 24px;
    transition: all 0.3s ease;
  }

  :deep(.ant-table-pagination) {
    margin-top: 16px;
  }

  .feedback-detail {
    padding: 16px;
  }

  .detail-item {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
  }

  .detail-item .label {
    width: 100px;
    color: var(--theme-textSecondary);
    flex-shrink: 0;
    transition: color 0.3s ease;
  }

  .detail-item .description {
    flex: 1;
    white-space: pre-wrap;
    line-height: 1.5;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .detail-actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .feedback-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-left: 2px;
    border-bottom: 1.5px solid var(--theme-border);
    transition: all 0.3s ease;
  }
  
  .feedback-title-bar .left {
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: bold;
    background: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    gap: 12px;
    transition: all 0.3s ease;
  }
  
  .feedback-title-bar .icon {
    font-size: 30px;
    color: var(--theme-primary);
    transition: color 0.3s ease;
  }

  /* 确保所有元素都使用主题色 */
  .feedback-manage-container * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  /* 修复可能遗漏的卡片背景 */
  .feedback-manage-content {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
  }

  /* 修复可能遗漏的边框和阴影 */
  .feedback-manage-content {
    border-color: var(--theme-border) !important;
    box-shadow: 0 2px 8px var(--theme-shadow) !important;
  }

  /* 修复可能遗漏的文字颜色 */
  .detail-item .label {
    color: var(--theme-textSecondary) !important;
  }

  .detail-item .description {
    color: var(--theme-text) !important;
  }

  /* 修复可能遗漏的标题栏边框 */
  .feedback-title-bar {
    border-bottom-color: var(--theme-border) !important;
  }

  /* 增强文字可读性 - 修复红色圈出的文字问题 */
  :deep(.ant-table) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
  }

  :deep(.ant-table-thead > tr > th) {
    background: var(--theme-background) !important;
    color: var(--theme-text) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
    border-bottom-color: var(--theme-border) !important;
  }

  :deep(.ant-table-tbody > tr > td) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
    border-bottom-color: var(--theme-border) !important;
  }

  /* 修复悬停颜色太深的问题 - 使用更柔和的悬停效果 */
  :deep(.ant-table-tbody > tr:hover > td) {
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    color: var(--theme-text) !important;
    font-weight: 600 !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.2) !important;
  }

  /* 修复弹窗中的文字可读性 */
  :deep(.ant-modal) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
  }

  :deep(.ant-modal-header) {
    background: var(--theme-background) !important;
    border-bottom-color: var(--theme-border) !important;
  }

  :deep(.ant-modal-title) {
    color: var(--theme-text) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  :deep(.ant-modal-body) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
  }

  :deep(.ant-modal-close) {
    color: var(--theme-text) !important;
  }

  /* 修复标签和徽章的文字可读性 */
  :deep(.ant-tag) {
    color: var(--theme-text) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  :deep(.ant-badge-status-text) {
    color: var(--theme-text) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  /* 修复按钮文字可读性 */
  :deep(.ant-btn) {
    color: var(--theme-text) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  :deep(.ant-btn-primary) {
    color: var(--theme-surface) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  /* 修复选择器文字可读性 */
  :deep(.ant-select-selector) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  :deep(.ant-select-selection-placeholder) {
    color: var(--theme-textSecondary) !important;
    font-weight: 500 !important;
  }

  /* 修复分页器文字可读性 */
  :deep(.ant-pagination-item) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  :deep(.ant-pagination-item-active) {
    background: var(--theme-primary) !important;
    color: var(--theme-surface) !important;
    font-weight: 700 !important;
  }

  :deep(.ant-pagination-prev),
  :deep(.ant-pagination-next) {
    color: var(--theme-text) !important;
    font-weight: 600 !important;
  }

  /* 修复卡片文字可读性 */
  :deep(.ant-card) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
  }

  :deep(.ant-card-body) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
  }

  /* 增强所有文字的可读性 */
  .feedback-manage-container {
    color: var(--theme-text) !important;
  }

  .feedback-manage-content {
    color: var(--theme-text) !important;
  }

  /* 确保弹窗中的文字清晰可见 */
  .feedback-detail {
    color: var(--theme-text) !important;
  }

  .detail-item .label {
    color: var(--theme-text) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  .detail-item .description {
    color: var(--theme-text) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px var(--theme-shadow) !important;
  }

  /* 修复悬停颜色太深的问题 - 使用更柔和的悬停效果 */
  :deep(.ant-table-tbody > tr:hover > td) {
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    color: var(--theme-text) !important;
    font-weight: 600 !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.2) !important;
  }

  /* 修复不匹配的蓝色 - 使用主题色替代硬编码的蓝色 */
  :deep(.ant-badge-status-dot) {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
  }

  :deep(.ant-badge-status-text) {
    color: var(--theme-primary) !important;
    font-weight: 600 !important;
  }

  /* 修复表格中的状态点颜色 */
  :deep(.ant-table-tbody > tr > td .ant-badge-status-dot) {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
  }

  /* 修复操作按钮的悬停效果 */
  :deep(.ant-table-tbody > tr:hover .ant-btn) {
    background: var(--theme-primary) !important;
    color: var(--theme-surface) !important;
    border-color: var(--theme-primary) !important;
    font-weight: 600 !important;
  }

  /* 修复表格行的选中状态 */
  :deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
    background: rgba(var(--theme-primary-rgb), 0.1) !important;
    border-color: var(--theme-primary) !important;
  }

  /* 修复表格行的焦点状态 */
  :deep(.ant-table-tbody > tr:focus-within > td) {
    background: rgba(var(--theme-primary-rgb), 0.1) !important;
    border-color: var(--theme-primary) !important;
  }

  /* 使用CSS变量定义更柔和的悬停颜色 */
  :root {
    --hover-bg-light: rgba(var(--theme-primary-rgb), 0.08);
    --hover-bg-medium: rgba(var(--theme-primary-rgb), 0.15);
    --hover-bg-strong: rgba(var(--theme-primary-rgb), 0.25);
  }

  /* 应用柔和的悬停效果 */
  :deep(.ant-table-tbody > tr:hover > td) {
    background: var(--hover-bg-light) !important;
    color: var(--theme-text) !important;
    font-weight: 600 !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 1px 4px var(--hover-bg-medium) !important;
    transition: all 0.2s ease !important;
  }

  /* 修复状态标签的颜色 */
  :deep(.ant-tag-blue) {
    background: rgba(var(--theme-primary-rgb), 0.1) !important;
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
  }

  /* 修复表格边框和分割线 */
  :deep(.ant-table) {
    border-color: var(--theme-border) !important;
  }

  :deep(.ant-table-thead > tr > th) {
    border-bottom-color: var(--theme-border) !important;
    border-right-color: var(--theme-border) !important;
  }

  :deep(.ant-table-tbody > tr > td) {
    border-bottom-color: var(--theme-border) !important;
    border-right-color: var(--theme-border) !important;
  }
</style>
